<template>
  <div>
    <div style="position:absolute;right:10%;top:10px;z-index:100">
      <chart-select v-if="isShowSelect" :options="options"/>
    </div>
    <div ref="cloud" style="width:100%;height:500px;" v-loading="loading"></div>
  </div>
</template>

<script>
// import {getChartData} from '@api/chart'
export default {
  data() {
    return {
      loading: true,
      options: [
        {
          value: "选项1",
          label: "黄金糕"
        },
        {
          value: "选项2",
          label: "双皮奶"
        },
        {
          value: "选项3",
          label: "蚵仔煎"
        },
        {
          value: "选项4",
          label: "龙须面"
        },
        {
          value: "选项5",
          label: "北京烤鸭"
        }
      ]
    };
  },
  props: {
    api: {
      type: String,
      default: undefined
    },
    isShowSelect: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    api(nv) {
      // getChartData(nv).then(res => {
      //   if (res.msg > 0) {
      //     resData = res;
      //   } else {
      //     this.$message("请求失败");
      //   }
      // });
    }
  },
  mounted() {
    // 后台需要传：{title:String,data:Array[object],legendData:Array}
    this.loading = false;
    let myChart = this.$echarts.init(this.$refs.cloud);
    let resData = {};
    resData.title = "词云";
    resData.data = [
      {
        name: "Sam S Club",
        value: 10000,
        textStyle: {
          normal: {
            color: "black"
          },
          emphasis: {
            color: "red"
          }
        }
      },
      {
        name: "Macys",
        value: 6181
      },
      {
        name: "Amy Schumer",
        value: 4386
      },
      {
        name: "Jurassic World",
        value: 4055
      },
      {
        name: "Charter Communications",
        value: 2467
      },
      {
        name: "Chick Fil A",
        value: 2244
      },
      {
        name: "Planet Fitness",
        value: 1898
      },
      {
        name: "Pitch Perfect",
        value: 1484
      },
      {
        name: "Express",
        value: 1112
      },
      {
        name: "Home",
        value: 965
      },
      {
        name: "Johnny Depp",
        value: 847
      },
      {
        name: "Lena Dunham",
        value: 582
      },
      {
        name: "Lewis Hamilton",
        value: 555
      },
      {
        name: "KXAN",
        value: 550
      },
      {
        name: "Mary Ellen Mark",
        value: 462
      },
      {
        name: "Farrah Abraham",
        value: 366
      },
      {
        name: "Rita Ora",
        value: 360
      },
      {
        name: "Serena Williams",
        value: 282
      },
      {
        name: "NCAA baseball tournament",
        value: 273
      },
      {
        name: "Point Break",
        value: 265
      }
    ];

    // 指定图表的配置项和数据
    let option = {
      title: {
        text: resData.title,
        x: "2%",
        textStyle: {
          color: "rgba(96, 98, 102, 1)",
          fontSize: "20"
        }
      },
      // color: ["#3398DB"],
      // tooltip: {
      //   show: true
      // },
      series: [
        {
          type: "wordCloud",
          gridSize: 2,
          sizeRange: [12, 50],
          //  rotationRange: [0, 90],
          shape: "star",
          //width: 600,
          //height: 400,
          textStyle: {
            normal: {
              color: function() {
                return (
                  "rgb(" +
                  [
                    Math.round(Math.random() * 160),
                    Math.round(Math.random() * 160),
                    Math.round(Math.random() * 160)
                  ].join(",") +
                  ")"
                );
              }
            },
            emphasis: {
              shadowBlur: 10,
              shadowColor: "#333"
            }
          },
          data: resData.data
        }
      ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    // 浏览器窗口自适应
    window.onresize = function() {
      myChart.resize();
    };
  }
};
</script>

<style>
</style>
